<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            background-color: #CCCCCC;
        }
        #content{
            margin: 300px auto;
            width: 1200px;
        }
        img{
            width: 240px;
            margin-left: 30px;
            margin-bottom: 60px;
            padding: 10px;
            background-color: #FFFFFF;
            /*
            转换
            旋转20角度
            */
            transform: rotate(-20deg);
        }
        img:hover{
            /*
            旋转正   缩放1.5
            在一定时间内
            */
            transform: rotate(0deg) scale(1.5);
            transition:3s;
        }


    </style>
</head>
<body>
<div id="content">
    <div id="content_01">
        <img src="image/a1.jpg">
        <img src="image/a2.jpg">
        <img src="image/a3.jpg">
        <img src="image/a4.jpg">
    </div>
    <div id="content_02">
        <img src="image/a5.jpg">
        <img src="image/a6.jpg">
        <img src="image/a7.jpg">
        <img src="image/a8.jpg">
    </div>

</div>

</body>
</html>